<template>
	<div >
		<div class="login_bk"></div>
		<div>
			<el-row type="flex"  align="middle" justify="center"  >
				<el-col :span="9" class="container">
						<el-card class="loginCard animate__animated animate__flipInY " v-if="!toRegister" key='login' v-loading="loading">
								
							<div style="text-align:center;font-size: 13pt;margin-bottom: 40px;">账号登录</div>
								
							<el-form :model="LoginForm" ref="LoginForm" :rules="rules">
								<el-row type="flex" align="middle" justify="center">
									<el-col :span="20">
										<el-form-item prop="id" >
												<!-- <i class="el-icon-user" style="margin-right: 5%; "></i> -->
												<el-input placeholder="请输入邮箱" prefix-icon="el-icon-user" v-model="LoginForm.id" style=""></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row type="flex" align="middle" justify="center">
									<el-col :span="20">
										<el-form-item prop="pwdLogin" >
												<!-- <i class="el-icon-lock" style="margin-right: 5%;"></i> -->
												<el-input placeholder="请输入密码" prefix-icon="el-icon-lock" type="password" v-model="LoginForm.pwdLogin" style="margin-top: 20px;"></el-input>
										
										</el-form-item>
									</el-col>
								</el-row>
								<el-row type="flex" align="middle" justify="center">
									<el-col :span="20" style="text-align: center;">
										<el-button  style="width: 30%;margin-top: 20px;" type="primary" @click="login('LoginForm')">登录</el-button>
									</el-col>
								</el-row>
								<el-row type="flex" align="middle" justify="center" >
									<el-col :span="20" style="text-align: center;">
										<el-button style="width: 50%;margin-top: 15px;"  type="text" @click="toRegister = ! toRegister;isRegister = true">没有账号？点击注册</el-button>
									</el-col>
								</el-row>
								<el-row type="flex" align="middle" justify="center">
									<el-col :span="20" style="text-align: center;">
										<el-button style="color: red;margin-top: 0px;"  type="text" @click="toRegister = ! toRegister;isRegister = false">忘记密码？</el-button>
									</el-col>
								</el-row>
								
								
								
							</el-form>
						</el-card>
						<register v-if="toRegister" :isRegister="isRegister" @toLogin="toRegister = !toRegister" @goBack="toRegister = !toRegister"></register>
				</el-col>
			</el-row>
		</div>
		
	</div>
</template>

<script>
	import register  from '../components/register.vue'
	export default {
		components: {
		  register
		  
		},
		name: 'login',
		props: {},
		data: function() {
			 
			var  validatePass =  (rule, value, callback) => {
				if (value === "") {
					callback(new Error('请输入密码'));
				}else if(false){
						callback(new Error('密码必须在8到16位之间'));
				} else{
					callback();
				}
			};

			var validatePass2 = (rule, value, callback) => {
				if (value === "") {
				callback(new Error('请再次输入密码'));
				} else if (value !== this.RegisterForm.pwdRegister) {
				callback(new Error('两次输入密码不一致!'));
				} else {
				callback();
				}
			};

			return {
				isRegister:true,
				LoginForm: {
					"id":"",
					"pwdLogin":""
				},
				
				
				
				rules: {
					id: [
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ type:"email" ,message: '请输入正确邮箱格式', trigger: 'blur' }
					],
					
					pwdLogin: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 8, max: 16  ,message: '长度为8-16个字符', trigger: 'blur' }
					]},
				toRegister: false,
				loading:false,
				
			}
		},
		methods: {
			
			
			   login(formName) {
				
				let _this = this
				  this.$refs[formName].validate(async (valid) => {
					if (valid) {
						this.loading = true;
						let postData = {
							id:_this.LoginForm.id,
							pwd:_this.$md5(_this.LoginForm.pwdLogin)
						}
						let res = await _this.text("user/login",postData,"post")
						
						if (res.code === 200) {
							this.$message({
								message: '登录成功',
								type: 'success'
								});
								
							_this.$GLOBAL.isLogin = true
							sessionStorage.setItem("isLogin", _this.$GLOBAL.isLogin);
									
							_this.$GLOBAL.token = res.data.token
							sessionStorage.setItem("token", _this.$GLOBAL.token);	
							
							
							
							let userInfo = await _this.text("user/showSelf")
							// 
							_this.$GLOBAL.userId = userInfo.data.id
							sessionStorage.setItem("userId", userInfo.data.id);	
							
							_this.$GLOBAL.avatar = _this.$api.picTemplate + userInfo.data.avatar
							sessionStorage.setItem("avatar", _this.$GLOBAL.avatar);
							
							if (userInfo.data.perms >= 1) {								
								_this.$GLOBAL.isInsider = true
								sessionStorage.setItem("isInsider", _this.$GLOBAL.isInsider);	
							}
							if (userInfo.data.perms >= 2) {							
								_this.$GLOBAL.isAdmin = true
								sessionStorage.setItem("isAdmin", _this.$GLOBAL.isAdmin);	
							}
							this.$router.push("index")
							location.reload();
							
						}
						else if(res.code === 50012){
							this.$message.error('用户不存在，请注册！');
						}else if(res.code === 50010){
							this.$message.error('账号密码不匹配，请检查后重新登陆！');
						}else if(res.code === 50015){
							this.$message.error('用户为黑名单用户，联系管理员解决！');
						}else{
							this.$message.error('请求失败或者接口返回失败！');
						} 
						this.loading = false;
					}else {
					this.$message.error('请输入数据');
					return false;
				}
						
			});
				

			},
			
		}
	} 
			
</script>

<style scoped>
  @import url("../assets/style/login.css");
</style>
